<template>
  <div>
    <x-header id="header" :left-options="{backText: ''}">推荐客户</x-header>
    <div class="main-header">
      <div class="weui-cells_form">
        <group gutter="0">
          <x-input placeholder="请输入客户姓名" class="input" is-type="china-name"  v-model="name">
            <div class="input-label" slot="label" >客户姓名</div>
          </x-input>
          <x-input placeholder="请输客户手机" class="input" is-type="china-mobile" :max="11"  v-model="mobile">
            <div class="input-label" slot="label">客户手机</div>
          </x-input>
          <x-input placeholder="请输入身份证号" class="input" type="number" :max="18" v-model="idCard">
            <div class="input-label" slot="label">身份证号</div>
          </x-input>
        </group>
      </div>
      <!--<div class="recommend-check">-->
        <!--<group class="group" title="渠道来源">-->
          <!--<cell class="cell" v-for="(item,index) in channelList" :key="index" :title="item.title" >-->
            <!--<img slot="icon" width="25" class="cell-icon" :src="item.choose === 1?'../../../static/img/on.png':'../../../static/img/off.png'" @click="choose(index)" />-->
          <!--</cell>-->
        <!--</group>-->
      <!--</div>-->
      <div class="recommend-certificate">
        <div class="certificate-title">自带征信</div>
        <div class="certificate-tips">若有征信报告，请以图片形式上传。若无，则跳过。</div>
        <div class="certificate-upload">
          <div class="upload-con-solid" v-for=" (item,index) in imgList" :key="index">
            <img :src="item" class="upload-img" />
          </div>
          <div class="upload-con-dashed" v-if="imgList.length < 3">
            <input type="file" class="input-file upload-input" name="avatar" ref="avatarInput" @change="upload" accept="image/gif,image/jpeg,image/jpg,image/png">
            <div class="img" style="width: 2px;height: 30%;background: #d8d8d8;position: absolute;top: 35%;left:49%"></div>
            <div style="width: 30%;height: 2px;background: #d8d8d8;position: absolute;top: 49%;left:35%"></div>
          </div>
        </div>
      </div>
      <div class="confirm">
        <x-button class="confirm-button" @click.native="applyLoad">确认推荐</x-button>
      </div>
    </div>
  </div>
</template>

<script>
import { addLoanApplication } from '@/api/home'
import axios from 'axios'

export default {
  name: 'recommend',
  data () {
    return {
      name: '',
      mobile: '',
      idCard: '',
      channelList: [
        {
          id:0,
          title: '寿险渠道',
          choose: 1
        },
        {
          id:1,
          title: '同行渠道',
          choose: 0
        },
        {
          id:2,
          title: '入围公司',
          choose: 0
        },
        {
          id:3,
          title: '其他渠道',
          choose: 0
        },
      ],
      current: 0,
      file:'',
      imgList: []
    }
  },
  methods: {
    choose(index) {
      let _index = parseInt(index)
      if (_index !== this.current) {
        this.current = _index
        this.channelList = this.channelList.map( (item, itemIndex) => {
          if (_index === itemIndex) {
            item.choose = 1
          } else {
            item.choose = 0
          }
          return item
        })
      }
    },
    applyLoad () {
      if (!this.name) {
        this.$vux.toast.show({
          text: '缺少姓名',
          type: 'cancel'
        })
        return
      } else if (!this.mobile) {
        this.$vux.toast.show({
          text: '缺少手机',
          type: 'cancel'
        })
        return
      } else if (!this.idCard) {
        this.$vux.toast.show({
          text: '缺少身份证',
          type: 'cancel'
        })
        return
      } else {
        addLoanApplication({ cid:this.globalData.cid, applyName:this.name, applyMobile: this.mobile, IDNumber: this.idCard, channelSrc: this.current + 1, picture:this.imgList }).then(()=>{
          this.$vux.toast.show({
            text: '推荐成功',
            type: 'success'
          })
          setTimeout(() => {
            this.$router.back(-1)
          }, 1500)
        })
      }
    },
    async upload (e){
      if (this.imgList.length < 3) {
        let file = e.target.files;
        let length = file.length
        if (length && length === 1) {
          this.uploadQiniu(file[0]).then( response => {
            if (response.key) {
              this.imgList.push(`http://img.bajiaostar.com/${response.key}`)
            } else {
              this.$vux.toast.text(`${file[0].name}上传失败`)
            }
          })
        } else if (length && length > 1) {
          for (let item of file) {
            const response = await this.uploadQiniu(item)
            if (response.key) {
              this.imgList.push(`http://img.bajiaostar.com/${response.key}`)
            } else {
              this.$vux.toast.text(`${file[0].name}上传失败`)
            }
          }
        }
      } else {
        this.$vux.toast.error(`最多上传3张凭证`)
      }
    },
    uploadQiniu (file) {
      return new Promise( (resolve,reject) => {
        let param = new FormData(); //创建form对象
        param.append('file',file,file.name);//通过append向form对象添加数据
        // param.append('chunk','0');//添加form表单中其他数据
        param.append('token', 'l_Qy04YaEejPEbHcRoptsW1m2c1kzT9G51cAET95:oOtBlfJwmDR86DX5jfO9K6MzVs8=:eyJzY29wZSI6ImJhamlhb3dlYiIsImRlYWRsaW5lIjoxODY3Mzg4NDE3fQ==')
        // console.log(param.get('file')); //FormData私有类对象，访问不到，可以通过get判断值是否传进去
        let config = {
          headers:{'Content-Type':'multipart/form-data'}
        };  //添加请求头
        axios.post('http://upload.qiniu.com/',param,config)
          .then(response=>{
            resolve(response.data)
            console.log(response.data);
          }, error => {
            reject(error)
            console.log(error);
          })
      })
    }
  }
}
</script>

<style scoped>
.confirm {
  padding: 1rem;
}
.confirm-button {
  background: #F14E2C;
  border-radius: 4px;
  color: #fff;
  font-size: 14px;
  line-height: 3rem;
}
.certificate-upload {
  display: flex;
  flex-wrap: wrap;
}
.upload-con-solid {
  width: 7rem;
  height: 7rem;
  border: 1px solid #eee;
  border-radius: 3px;
  margin-right: 1.6rem;
}
.upload-con-solid:last-child {
  margin-right: 0;
}
.upload-con-dashed {
  width: 7rem;
  height: 7rem;
  border: 1px dashed #eee;
  border-radius: 3px;
  position: relative;
}
.upload-img {
  height: 100%;
  width: 100%;
  display: block;
}
.upload-input {
  width:100%;
  height:100%;
  opacity: 0
}
</style>
